<template>
	<view>
		<view class="newRepairs-box">
			<u--form labelPosition="left" :model="formData" ref="uForm" labelWidth="170rpx" labelAlign="right"
				:rules="rules">
				<u-form-item label="故障设备：" prop="machineryName" :required="true" borderBottom ref="item1" @click="shows = true">
					<u--input v-model="formData.machineryName" disabledColor="#ffffff" placeholder="请选择/扫设备二维码"
						border="none"></u--input>
					<image slot="right" src="/static/images/index/扫码.png" mode="" class=""
						style="height: 32rpx;width: 32rpx;" @click="call"></image>
				</u-form-item>
				<u-form-item label="设备编码：" prop="machineryCode" borderBottom ref="item1">
					<u--input v-model="formData.machineryCode" disabled disabledColor="#ffffff" placeholder="请输入设备编码"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="设备类型：" prop="machineryTypeName" borderBottom ref="item1">
					<u--input v-model="formData.machineryTypeName" disabled disabledColor="#ffffff"
						placeholder="请选择设备类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="规格型号：" prop="machinerySpec" borderBottom ref="item1">
					<u--input v-model="formData.machinerySpec" disabled disabledColor="#ffffff" placeholder="请选择规格型号"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="维修编号：" prop="repairCode" :required="true" borderBottom ref="item1">
					<u--input v-model="formData.repairCode" disabledColor="#ffffff" placeholder="请输入维修单编号"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="发生时间：" prop="requireDate" borderBottom ref="item1" @click="open">
					<u--input v-model="formData.requireDate" disabled disabledColor="#ffffff" placeholder="请选择时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="紧急情况：" prop="urgencyDegreeName" borderBottom ref="item1" @click="condition = true">
					<u--input v-model="formData.urgencyDegreeName" disabled disabledColor="#ffffff" placeholder="请选择紧急情况"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注：" prop="remark" :required="true" borderBottom ref="item1">
					<u--textarea v-model="formData.remark" placeholder="请输入内容"></u--textarea>
				</u-form-item>
				<view class="state-box" v-for="(item,index) in formData.repairLineList" :key="index">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="" style="font-weight: 700;">
							故障描述{{index + 1}}
						</view>
						<view class="" @click="del(index)">
							<u-icon name="trash"></u-icon>
						</view>
					</view>
					<u-form-item label="维修单名称：" prop="" borderBottom ref="item1">
						<u--input v-model="item.subjectName" disabledColor="#ffffff"
							placeholder="请输入维修单编号" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="故障描述：" prop="malfunction" ref="item1">
						<u--textarea v-model="item.malfunction" placeholder="请输入内容"></u--textarea>
					</u-form-item>
					<view class="" @click="add">
						<u-icon   name="plus"></u-icon>
					</view>
				</view>
			</u--form>

			<!-- 日期组件 -->
			<u-datetime-picker :show="show" mode="datetime" @cancel="cancel" @confirm="confirm"></u-datetime-picker>

			<!-- 按钮 -->
			<view class="button">
				<view class="button-left buuton-common">
					取消
				</view>
				<view class="button-right buuton-common" @click="submit">
					提交
				</view>
			</view>
		</view>

		<!-- 设备类型 -->
		<u-popup :show="shows" mode="center" @close="cancel" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					设备
				</view>
				<view class="container">
					<u-radio-group v-model="machineryCode" placement="column" shape="circle" iconPlacement="right"
						activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in Machinery" :key="index"
							:label="item.machineryName" :name="item.machineryCode">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="button">
					确定
				</view>
			</template>
		</u-popup>
		<!-- 紧急情况 -->
		<u-popup :show="condition" mode="center" @close="cancel" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					紧急情况
				</view>
				<view class="container">
					<u-radio-group v-model="urgencyDegree" placement="column" shape="circle" iconPlacement="right"
						activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in dict" :key="index"
							:label="item.y" :name="item.k">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="button1">
					确定
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import {
		timestampToTime
	} from '@/utils/timestamp'
	import {
		putRepair,
		getMachinery
	} from '@/api/facilityMaintain/newRepairs.js'
	import {
		listMachinerytype,
		getWorkshop
	} from '@/api/mes/mes.js'
	export default {
		data() {
			return {
				rules: {
					'machineryName': {
						type: 'string',
						required: true,
						message: '请输入故障设备',
						trigger: ['blur', 'change']
					},
					'repairName': {
						type: 'string',
						required: true,
						message: '请输入维修单名称',
						trigger: ['blur', 'change']
					},
					'remark': {
						type: 'string',
						required: true,
						message: '请输入备注',
						trigger: ['blur', 'change']
					},
					'repairCode': {
						type: 'string',
						required: true,
						message: '请输入维修单编号',
						trigger: ['blur', 'change']
					},
				},
				Machinery: [], //设备
				machineryCode: '',
				formData: {
					repairName: '',
					machineryName: '',
					remark: '',
					status: 'RECEIVING',
					repairLineList: [{
						subjectName: '',
						malfunction: ''
					}] //故障详情
				},
				dict: [{
					k: "0",
					y: "一般"
				}, {
					k: "1",
					y: "紧急"
				}, {
					k: "2",
					y: "非常紧急"
				}],
				condition: false, //紧急情况
				urgencyDegree: '',
				show: false,
				shows: false, //设备

				checkboxList: [], //设备类型
			};
		},
		created() {
			this.getMes()
		},
		methods: {
			// 删除某一个故障项
			del(index){
				if(this.formData.repairLineList.length > 1){
					this.formData.repairLineList.splice(index,1)
				}else{
					uni.$u.toast('必须保留一项！')
				}
			},
			// 添加故障项
			add(){
				let obj = {
						subjectName: '',
						malfunction: ''
					}
				this.formData.repairLineList.push(obj)
			},
			// 提交表单数据
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('维修单提交成功！')
					putRepair(this.formData).then(res => {
						console.log(res);
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			},
			//设备选择确定按钮
			button() {
				this.Machinery.forEach(item => {
					if (item.machineryCode == this.machineryCode) {
						this.formData.machineryName = item.machineryName
						this.formData.machineryId = item.machineryId
						this.formData.machineryTypeName = item.machineryTypeName
						this.formData.machineryCode = item.machineryCode
						this.formData.machineryTypeId = item.machineryTypeId
						this.formData.machinerySpec = item.machinerySpec
					}
				})
				this.cancel()
			},
			//紧急情况选择确定按钮
			button1() {
				this.dict.forEach(item => {
					if (item.k == this.urgencyDegree) {
						this.formData.urgencyDegreeName = item.y
					}
				})
				this.formData.urgencyDegree = this.urgencyDegree
				this.cancel()
			},
			//
			// 设备类型 / 车间
			getMes() {
				// 设备类型
				listMachinerytype().then(response => {
					response.data.splice(0, 1)
					this.checkboxList = response.data
				})
				// 设备
				getMachinery().then(res => {

					this.Machinery = res.rows
					console.log(this.Machinery);
				})
			},
			// 扫码
			call() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 打开选择日期
			open() {
				this.show = true
			},
			// 选择日期点击取消
			cancel() {
				this.show = false
				this.shows = false
				this.condition = false
			},
			// 选择日期点击确定
			confirm(e) {
				this.formData.requireDate = timestampToTime(e.value)
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
::v-deep	.state-box {
		margin: 32rpx 0 48rpx 0;
		padding: 48rpx 32rpx 32rpx 32rpx;
		// height: 450rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
		.u-form-item__body__left{
			width: 190rpx !important;
		}
		.u-icon__icon{
			display: block !important; 
			margin: 0 auto;
			font-size: 42rpx !important;
		}
	}

	.newRepairs-box {
		margin: 32rpx;
		padding: 32rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
	}

	::v-deep .u-form-item {
		margin-bottom: 10rpx;
	}

	.button {

		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;

		.buuton-common {
			width: 296rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;

			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-right {
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			color: rgba(255, 255, 255, 1);
		}

		.button-left {
			border: 1px solid #38AFFF;
			color: rgba(32, 37, 64, 1);
		}
	}



	.popup-header {
		margin: 0 32rpx 32rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);
	}

	.container {
		// height: 466rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
		border-bottom: 0.5px solid #f2f2f4;
	}

	// 多选框得边框颜色
	::v-deep .u-radio__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-radio-group--column {
		padding: 0 32rpx;
	}
	::v-deep .u-form-item__body__left__content__label{
		font-size: 12px !important;
	}
	::v-deep .weizi {
		.u-popup__content {
			// height: 500rpx !important;
			width: 690rpx !important;
			opacity: 1;
			border-radius: 20rpx !important;
			background: white;
		}

		.u-radio {
			margin-bottom: 48rpx !important;
		}

		.button {
			margin: 38rpx auto;
			width: 490rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			font-size: 32Rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 64rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}

	}
</style>